<template>
  <div class="home">
    <h1>This is an home page</h1>
  </div>

    <div class="page">
      <router-link
          class="router-link"
          to="/home"
          :class="{ active: $route.path === '/home' }">
        home
      </router-link>
      <router-link
          class="router-link"
          to="/analysis"
          :class="{ active: $route.path === '/analysis' }">
        analysis
      </router-link>
      <router-link
          class="three"
          to="/riverEnv"
          :class="{ active: $route.path === '/riverEnv' }">river
      </router-link>
      <router-link
          class="three"
          to="/reductionTarget"
          :class="{ active: $route.path === '/reductionTarget' }">river
      </router-link>
    </div>

</template>

<style>
@media (min-width: 1024px) {
  .home {
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
  }
  .page {
  font-size: larger;
  }
}
.page {
  display: flex;
  justify-content: space-around; /* 分散对齐导航项 */
  background-color: #f9f9f9; /* 浅灰色背景 */
  padding: 1rem; /* 内边距 */
}

.router-link {
  text-decoration: none; /* 移除下划线 */
  padding: 0.5rem 1rem; /* 内边距，增加点击区域 */
  color: #333; /* 文字颜色 */
  transition: background-color 0.3s; /* 平滑的背景色过渡 */
}

.router-link:hover {
  background-color: #e0e0e0; /* 鼠标悬停时的背景色 */
}

.router-link.active {
  font-weight: bold; /* 激活状态的文字加粗 */
  color: #007bff; /* 激活状态的文字颜色 */
  background-color: #cce5ff; /* 激活状态的背景色 */
  border-radius: 4px; /* 圆角 */
}
</style>
<script setup>
</script>